﻿<style>
    li{
        height:30px;
        line-height: 30px;       
    }
    
</style>
<title>音乐排行榜</title>
<h2>音乐排行榜</h2>
<ol>
    <li><a href="#">陈志朋 - 孤独成瘾</a> &nbsp;&nbsp;&nbsp;<img src="pic1.png"></li>
    <li><a href="#">关晓彤 - 灵感 与你彤行</a> &nbsp;<img src="pic1.png"></li>
    <li><a href="#">龙梅子 - 榜样</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="pic1.png"></li>
    <li><a href="#">夏婉安 - 斗地主</a>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<img src="pic1.png"></li>
    <li><a href="#">萧全 - 海草舞</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<img src="pic1.png"></li>
</ol>
<script>
    var i = 0;
    var music = new Audio();
    var musics = ["陈志朋 - 孤独成瘾","关晓彤 - 灵感 与你彤行","龙梅子 - 榜样","夏婉安 - 斗地主","萧全 - 海草舞"];
    window.onload = function(){
        var lis = document.getElementsByTagName("li");
        for(var i=0;i<lis.length;i++){
            lis[i].index = i;
            lis[i].onclick = function(){
                i = this.index;
                music.src = musics[i]+".mp3";
                music.play();
            }
        }
    }

</script>